<?php
session_start();
if ($_SESSION['Status'] != '1') {
    header('Location: signup.php');
}

$id = $_SESSION['name'];
?>

<script>
    $(document).ready(function() {
	
	
        /* initialize the external events
                -----------------------------------------------------------------*/
	
        $('#external-events div.external-event').each(function() {
		
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
                title: $.trim($(this).text()) // use the element's text as the event title
            };
			
            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);
			
            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
			
        });
    });
</script>

<script>
    function SwitchView(typeElem){
        var type = $(typeElem).val();
        switch(type){
            case "Assignment":
                $("#task").append('<tr id="completion"><td><p><label>Completion:</label></td><td><div class="slider" id="completionSlider" data-role="slider" data-param-init-value="0"></div><input class="with-helper input-control text" name="completion" type="hidden" autofocus="" placeholder=""/></p></td></tr>');
                break;
            case "Event":
                $("#task").find("input").removeAttr("disabled");
                $("#completion").remove();
                break;
            case "Reminder":
                $("#task input[name='e_time']").attr("disabled", "disabled");
                $("#completion").remove();
                break;
            }
            
            $()["Slider"]({initAll: true});
        }
            
        (function(){
            $("#completionSlider").on("change", function(e, val){
                $("input[name='completion']").val(val);
            });
                
            $(document).ready(function() {
	
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
		
                var calendar = $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    selectable: true,
                    selectHelper: true,
                    editable: true,
                    droppable: true,
                    eventClick: function(event, element) {
                        $.Dialog({
                            'title': 'Edit Task',
                            'draggable':true,
                            'content': '<form id="task">'+
                                '<input type="hidden" value="'+event.task_id+'" name="task_id"/>'+
                                '<table style="border-color: white;">'+
                                '<tr><td><p><label>Task:</label></td><td><input value="'+event.title+'" class="with-helper input-control text" name="taskName" type="text" autofocus="" placeholder="What I have to do.."/></p></td></tr>'+
                                '<tr><td><p><label>Start Time:</label></td><td><input value="'+event.s_time+'" class="with-helper input-control text" name="s_time" type="text" autofocus="" placeholder="hh:mm"/></p></td></tr>'+
                                '<tr><td><p><label>End Time:</label></td><td><input value="'+event.e_time+'" class="with-helper input-control text" name="e_time" type="text" autofocus="" placeholder="hh:mm"/></p></td></tr>'+
                                '<tr><td><p><label>Description:</label></td><td><input value="'+event.description+'" class="with-helper input-control text" name="desc" type="text" autofocus="" placeholder=""/></p></td></tr>'+
                                '</table></form>',
                            'buttons'    : {
                                'Ok'    : {
                                    'action': function() {
                                        var data_acyr = $('#task').serialize();
                                        $.ajax({
                                            url:'dbCon.php?action=UPDATE',
                                            type:"POST",
                                            data: data_acyr,
                                            success:function(data){
                                                if(data=="200"){
                                                    event.name = $("#task[name='taskName']").val();
                                                    calendar.fullCalendar( 'refetchEvents');
                                                    notification(0,'success');
                                                }else
                                                    notification(0,'failed');
                                            }
                                        });
                                    }
                                },
                                'Cancel'     : {
                                    'action': function() {}
                                },
                                'Remove Task'     : {
                                    'action': function() {
                                        $.ajax({
                                            url:'dbCon.php?action=DELETE',
                                            type:"POST",
                                            data: {"task_id": event.task_id},
                                            success:function(data){
                                                if(data=="200"){
                                                    calendar.fullCalendar( 'refetchEvents');
                                                }else
                                                    notification(0,'failed');
                                            }
                                        });
                                    }
                                }
                            }
                        });
                    },
                    eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
                        $.ajax({
                            url:'dbCon.php?action=UPDATE',
                            type:"POST",
                            data: {"e_date": event.end.toLocaleFormat("%Y-%m-%d"), "task_id": event.task_id},
                            success:function(data){
                                if(data=="200"){
                                    calendar.fullCalendar( 'refetchEvents');
                                }else{
                                    revertFunc();
                                }
                            }
                        });
                    },
                    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
                        $.ajax({
                            url:'dbCon.php?action=UPDATE',
                            type:"POST",
                            data: {"e_date": event.end.toLocaleFormat("%Y-%m-%d"), "s_date": event.start.toLocaleFormat("%Y-%m-%d"), "task_id": event.task_id},
                            success:function(data){
                                if(data=="200"){
                                    calendar.fullCalendar( 'refetchEvents');
                                }else{
                                    revertFunc();
                                }
                            }
                        });

                    },
                    select: function(start, end, allDay) {
                        $.Dialog({
                            'title': 'Add Task',
                            'draggable':true,
                            'content': '<form id="task">'+
                                '<input type="hidden" value="'+start.toLocaleFormat("%Y-%m-%d")+'" name="s_date"/>'+
                                '<input type="hidden" value="'+end.toLocaleFormat("%Y-%m-%d")+'" name="e_date"/>'+
                                '<table style="border-color: white;">'+
                                '<tr><td><p><label>Task:</label></td><td><input class="with-helper input-control text" name="taskName" type="text" autofocus="" placeholder="What I have to do.."/></p></td></tr>'+
                                '<tr><td><p><label>Type:</label></td><td><select onchange="SwitchView(this)" type="text" autofocus="" name="type" placeholder=""><option value="Event">Event</option><option value="Reminder">Reminder</option><option value="Assignment">Assignment</option></select></p></td></tr>'+
                                '<tr><td><p><label>Start time:</label></td><td><input class="with-helper input-control text" type="text" autofocus="" name="s_time" placeholder="hh:mm"/></p></td></tr>'+
                                '<tr><td><p><label>End time:</label></td><td><input class="with-helper input-control text" name="e_time" type="text" autofocus="" placeholder="hh:mm"/></p></td></tr>'+
                                '<tr><td><p><label>Description:</label></td><td><input class="with-helper input-control text" name="desc" type="text" autofocus="" placeholder=""/></p></td></tr>'+
                                '</table></form>',
                            'buttons'    : {
                                'Ok'    : {
                                    'action': function() {
                                        var data_acyr = $('#task').serialize();
                                        $.ajax({
                                            url:'dbCon.php?action=INSERT',
                                            type:"POST",
                                            data: data_acyr,
                                            success:function(data){
                                                if(data=="200")
                                                {
                                                    calendar.fullCalendar('renderEvent',
                                                    {
                                                        title: $("input[name='taskName']").val(),
                                                        start: new Date(start),
                                                        end: new Date(end)
                                                    },true);
                                                    notification(0,'success');
                                                }
                                                else
                                                {
                                                    notification(0,'failed');
                                                }
                                            }
                                        });
                                    }
                                },
                                'Cancel'     : {
                                    'action': function() {}
                                }
                            }
                        });
                        calendar.fullCalendar('unselect');
                    },
                    /* drop: function(date, allDay, jsEvent, ui) {
                        var className = $(this).html(),
                        classType = $(this).attr('data-classtype'),
                        room = $(this).attr('data-room'),
                        sTime = $(this).attr('data-stime'),
                        eTime = $(this).attr('data-etime'),
                        subjectSubId = $(this).attr('data-subjectsubid');
                        
                        $.ajax({
                            url:'dbCon_class.php?action=INSERT',
                            type:"POST",
                            data: {"class_name": className,
                                   "s_date": (new Date(date)).toLocaleDateString(),
                                   "class_type": classType,
                                   "room": room,
                                   "s_time": sTime,
                                   "e_time": eTime,
                                   "subject_sub_id": subjectSubId
                           },
                            success:function(data){
                                if(data=="200"){
                                    calendar.fullCalendar('refetchEvents');
                                    $(this).remove();
                                }
                            }
                        });
                            
				
                    },*/
                    drop: function(date, allDay) { 
                        var originalEventObject = $(this).data('eventObject');
                        var copiedEventObject = $.extend({}, originalEventObject);
                
                        copiedEventObject.start = date;
                        copiedEventObject.allDay = allDay;
                
                        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                        if ($('#drop-remove').is(':checked')) {
                            $(this).remove();
                        }
                
                    },
                    events: "dbCon.php?action=GET"
                });
            });})();
        function notification(trans,result){
          
            if (result == "success"){
                document.getElementById('cal-name').style.display = "none";
                document.getElementById('success').style.display = "block";
                document.getElementById('failed').style.display = "none";
            }
            else
            {
                document.getElementById('cal-name').style.display = "none";
                document.getElementById('failed').style.display = "block";  
                document.getElementById('success').style.display = "none";
            }
            if (trans == "clear")
            {
                document.getElementById('cal-name').style.display = "block";
                document.getElementById('success').style.display = "none";
                document.getElementById('failed').style.display = "none";
            }
            
        };
</script>
<style type="text/css">
    #calendar {
        width: 700px;
        margin: 0 auto;
    } 


    #wrap {
        width: 1100px;
        margin: 0 auto;
    }

    #external-events {
        float: left;
        width: 220px;
        padding: 0 10px;
        /* border: 1px solid #ccc; */
        background: #00D8CC;
        text-align: left;
    }

    #external-events h4 {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
    }

    .external-event { /* try to mimick the look of a real event */
        margin: 10px 0;
        padding: 2px 4px;
        background: #3366CC;
        color: #fff;
        font-size: .85em;
        cursor: pointer;
    }

    #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }

    #external-events p input {
        margin: 0;
        vertical-align: middle;
    }

</style>

<div class="page with-sidebar">
    <div class="page-header" id="cal-header">
        <div class="page-header-content" id="cal-name">
            <h1>Calendar</h1>
        </div>
        <div class="notices" id="success" style="display: none;">
            <div class="bg-color-green">
                <a href="#" class="close" id="close-info" onclick="notification('clear',0)"></a>
                <div class="notice-icon"> <img/> </div>
                <div class="notice-image"> <img/> </div>
                <div class="notice-header"> Success </div>
                <div class="notice-text"> Your Transaction has completed without any error. </div>
            </div>
        </div>

        <div class="notices" id="failed" style="display: none;">
            <div class="bg-color-red">
                <a href="#" class="close" id="close-info" onclick="notification('clear',0)"></a>
                <div class="notice-icon"> <img/> </div>
                <div class="notice-image"> <img/> </div>
                <div class="notice-header"> Failed </div>
                <div class="notice-text"> Your Transaction has not completed. Some errors occurred.  </div>
            </div>
        </div>
    </div>
    <style>
        #failed, #success
        {
            opacity:0.4;
            filter:alpha(opacity=40); /* For IE8 and earlier */
        }
        #failed, #success :hover
        {
            opacity:1.0;
            filter:alpha(opacity=100); /* For IE8 and earlier */
        }
    </style>

    <div class="page-sidebar bg-color-blueLight" style="padding-top: 0px; margin-top:10px; margin-left: 0px;">
        <div id='external-events'>
            <h4>Draggable Events</h4>
            <div class='external-event' data-room="CRoom" data-stime="03:30:00" data-etime="06:30:00" data-classtype="AA" data-subjectsubid="SS">My Event 1</div>
            <div class='external-event'>My Event 2</div>
            <div class='external-event'>My Event 3</div>
            <div class='external-event'>My Event 4</div>
            <div class='external-event'>My Event 5</div>
            <p>
                <input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label>
            </p>
        </div>
    </div>

    <div class="page-region">
        <div class="page-region-content">
            <div class="grid">
                <div class="row">
                    <div class="span9 bg-color-lighten" style="border: solid 1px #bebebe;">
                        <div id='calendar'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
        (function(){
            $('#external-events div.external-event').each(function() {
                var eventObject = {
                    title: $.trim($(this).text())
                };
			
                $(this).data('eventObject', eventObject);
			
                $(this).draggable({
                    zIndex: 999,
                    revert: true, 
                    revertDuration: 0 
                });
			
            });
        })();
</script>